.<template>
  <div>
    <div class="appbox" ref="wrapper">
      <div>
        <div class="top">
          <div class="left">
            <div class="left-box">
              <div class="number">{{ evaluate.score }}</div>
              <div class="evaluate">综合评分</div>
              <div class="high">高于周边商家{{ evaluate.rankRate }}%</div>
            </div>
          </div>
          <div class="right">
            <div class="right-box">
              <div class="serve">
                <span class="title">服务态度</span>
                <div class="star">
                  <div>
                    <van-rate
                      v-model="evaluate.serviceScore"
                      :size="15"
                      allow-half 
                      readonly
                      color="Orange"
                      void-icon="star"
                      void-color="#eee"
                      
                    />
                  </div>
                </div>
                <span class="nub">{{ evaluate.foodScore }}</span>
              </div>
              <div class="serve">
                <span class="title">服务态度</span>
                <div class="star">
                  <div>
                    <van-rate
                      v-model="evaluate.foodScore"
                      allow-half 
                      readonly
                      :size="15"
                      color="Orange"
                      void-icon="star"
                      void-color="#eee"
                    />
                  </div>
                </div>
                <span>{{ evaluate.serviceScore }}</span>
              </div>
              <div class="serve timebox">
                <span class="time">送达时间</span>
                <span class="timeto">{{ evaluate.deliveryTime }}分钟</span>
              </div>
            </div>
          </div>
        </div>
        <div class="width"></div>
        <div class="mid">
          <div class="crumbs">
            <ul>
              <li class="btn1">
                <van-button
                  color="#7232dd"
                  :class="{ active: selectType === 2 }"
                  @click="FilterType()"
                  >全部
                  <span>{{ merchant.length }}</span>
                </van-button>
              </li>
              <li class="btn1">
                <van-button
                  color="#7232dd"
                  plain
                  :class="{ active: selectType === 0 }"
                  @click="FilterType0()"
                  >满意
                  <span>{{ 18 }}</span>
                </van-button>
              </li>
              <li class="btn1">
                <van-button
                  color="#7232dd"
                  plain
                  :class="{ active: selectType === 1 }"
                  @click="FilterType1()"
                >
                  吐槽
                  <span>{{ 6 }}</span>
                </van-button>
              </li>
            </ul>
          </div>
          <div class="line"><div></div></div>

          <div class="title">
            <div class="icon">
              <svg
                t="1622604731232"
                class="icon icon-dagou"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6890"
                width="24"
                height="24"
                :class="{ on: onlyShowText }"
                @click="FilterText()"
              >
                <path
                  d="M512 928c-229.4 0-416-186.6-416-416S282.6 96 512 96s416 186.6 416 416-186.6 416-416 416z m0-768c-194 0-352 158-352 352s158 352 352 352 352-158 352-352S706 160 512 160z"
                  p-id="6891"
                ></path>
                <path
                  d="M435.2 704c-9 0-17.8-3.8-23.8-10.6l-115.2-128c-11.8-13.2-10.8-33.4 2.4-45.2 13.2-11.8 33.4-10.8 45.2 2.4l90.6 100.6 245.2-291.8c11.4-13.6 31.6-15.2 45-4 13.6 11.4 15.2 31.6 4 45l-268.8 320c-6 7-14.6 11.2-24 11.4-0.2 0.2-0.4 0.2-0.6 0.2z"
                  p-id="6892"
                ></path>
              </svg>
            </div>
            <div class="title-font">只看由内容评价</div>
          </div>
          <div class="user">
            <ul>
              <li>
                <div
                  class="userbox"
                  v-for="(item, index) in ratings"
                  :key="index"
                >
                  <div class="userbox-top">
                    <div class="top-left">
                      <div class="images">
                        <img :src="item.avatar" alt="" />
                      </div>
                      <div class="usernamebox">
                        <span class="username">{{ item.username }}</span>
                        <span class="user-icon">
                          <van-rate
                            v-model="item.score"
                            allow-half
                            void-icon="star"
                            void-color="#eee"
                            color="Orange"
                            :size="10"
                            readonly
                          />
                        </span>

                        <span>{{ item.deliveryTime }}分钟送达</span>
                      </div>
                    </div>
                    <div class="top-right">
                      <span>2080-07-13</span>
                      <span>20:33</span>
                    </div>
                  </div>
                  <div class="userbox-mid">
                    <span>{{ item.text }}</span>
                  </div>
                  <div class="userbox-bottom">
                    <span
                      ><svg
                        t="1622617319471"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="2134"
                        width="16"
                        height="16"
                      >
                        <path
                          d="M884.875894 423.143253 646.970506 423.143253c92.185562-340.464205-63.516616-357.853247-63.516616-357.853247-65.993017 0-52.312436 52.182476-57.3031 60.881602 0 166.502152-176.849824 296.971645-176.849824 296.971645l0 472.171899c0 46.607504 63.516616 63.393819 88.433098 63.393819l357.452111 0c33.641191 0 61.036122-88.224344 61.036122-88.224344 88.434122-300.70569 88.434122-390.177444 88.434122-390.177444C944.657442 418.179195 884.875894 423.143253 884.875894 423.143253L884.875894 423.143253 884.875894 423.143253zM884.875894 423.143253"
                          p-id="2135"
                        ></path>
                        <path
                          d="M251.671415 423.299819 109.214912 423.299819c-29.420053 0-29.873378 28.89612-29.873378 28.89612l29.420053 476.202703c0 30.309306 30.361495 30.309306 30.361495 30.309306L262.420223 958.707948c25.686009 0 25.458835-20.049638 25.458835-20.049638L287.879058 459.411271C287.879058 422.837284 251.671415 423.299819 251.671415 423.299819L251.671415 423.299819 251.671415 423.299819zM251.671415 423.299819"
                          p-id="2136"
                        ></path></svg
                    ></span>
                    <div v-for="(items, index) in item.recommend" :key="index">
                      <span>{{ items }}</span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Button } from "vant";
import { mapState, mapActions, mapGetters } from "vuex";
import BScroll from "better-scroll";
import Vue from "vue";
import { Rate } from "vant";

Vue.use(Rate);

export default {
  // name: evaluate,
  data() {
    return {
      ratings: [],
      onlyShowText: false, // 只显示有文本的
      selectType: 2,
      Type0: [],
      Type1: [],
    };
  },
  filters: {},
  methods: {
    initScroll() {
      this.$nextTick(() => {
        if (!this.Scroll) {
          this.Scroll = new BScroll(this.$refs.wrapper, {
            click: true, // 配置允许点击事件
            scrollY: true, // 开启纵向滚动
            // mouseWheel: true
          });
        } else {
          this.Scroll.refresh();
          // 重新计算 better-scroll，当 DOM 结构发生变化的时确保滚动效果正常
          console.log(2222);
        }
      });
      console.log(1111);
    },
    setSelectType(selectType) {
      this.selectType = selectType;
      console.log(this.selectType);
    },
    toggleOnlyShowText() {
      this.onlyShowText = !this.onlyShowText;
      console.log(this.onlyShowText);
    },
    FilterType() {
      this.ratings = this.$store.getters.FilterType(this.onlyShowText);
      this.selectType = 2;
    },
    FilterType0() {
      this.ratings = this.$store.getters.FilterType0(this.onlyShowText);
      this.selectType = 0;
    },
    FilterType1() {
      this.ratings = this.$store.getters.FilterType1(this.onlyShowText);
      this.selectType = 1;
    },
    FilterText() {
      this.onlyShowText = !this.onlyShowText;
      this.ratings = this.$store.getters.FilterText(
        this.onlyShowText,
        this.selectType
      );
    },
  },

  components: {
    [Button.name]: Button,
  },
  computed: {
    ...mapState(["evaluate", "merchant"]),
    // ...mapActions([]),
    // ...mapGetters(["mapGetters"]),
    // filterRatings() {
    //   //过滤数组
    //   const { onlyShowText, selectType, ratings } = this;
    //   return this.ratings.filter((rating) => {
    //     const { text, rateType } = rating;
    //     //分析：
    //     /*条件1：
    //                 1）先判断selectType是否为2，如果为2，不需考虑下面了
    //                 2) selectType!=2, 就考虑当前评论的
    //                     rateType==selectType
    //       总结： selectType==2 || selectType == rateType
    //     */

    //     /*条件2：
    //                 1）看onlyShowText ==false不选中，不需要考虑后面了
    //                 2）选中看评论的text是否大于0
    //      */
    //     return (
    //       (selectType == 2 || selectType == rateType)
    //        &&(!onlyShowText || text.length > 0)
    //     );
    //   });
    // },
  },
  async mounted() {
    // this.$nextTick(() => {
    //   this.scroll = new Bscroll(this.$refs.wrapper, {});
    // });
    let type0 = [];
    let type1 = [];
    type0 = this.FilterType0();
    type1 = this.FilterType1();
    console.log(type0, type1);
    await this.$store.dispatch("getmerchant");
    this.ratings = this.$store.state.merchant;
    // console.log(this.merchant)
    this.$nextTick(() => {
      this.initScroll();
    });
  },
};
</script>

<style lang="less" scoped>
.appbox {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 4.64rem;
  width: 100%;
  overflow: hidden;
  .van-button--normal {
    font-size: 10px;
    padding: 0, 10;
    &.active {
      background: green;
      color: #fff;
    }
  }
  .van-button {
    // display: flex;
    width: 150px;
    height: 60px;
    &.active {
      background: green;
      color: #fff;
    }
  }
  .top {
    width: 749px;
    display: flex;
    padding: 18px 0;

    .left {
      width: 275px;
      .left-box {
        // padding-top: 36px;
        text-align: center;
        border-right: 1px solid #ccc;
        padding-top: 36px;

        .number {
          font-size: 48px;
          color: rgb(255, 153, 0);
          line-height: 56px;
          padding-bottom: 12px;
        }
        .evaluate {
          padding-bottom: 16px;
          font-size: 24px;
          color: rgb(7, 17, 27);
          line-height: 24px;
        }
        .high {
          padding-bottom: 36px;
          font-size: 20px;
          color: rgba(7, 17, 27, 0.5);
          line-height: 20px;
        }
      }
    }
    .right {
      width: 475px;
      padding: 6px 0 6px 24px;

      .right-box {
        // text-align: center;
        // display: inline-block;
        padding-left: 48px;
        padding-right: 20px;
        padding-top: 36px;

        .serve {
          margin-bottom: 8px;
          display: flex;
          span {
            font-size: 24px;
            color: rgb(255, 153, 0);
            line-height: 36px;
          }

          .time {
            padding-right: 24px;
            // padding-bottom: 16px;
            font-size: 24px;
            color: rgb(7, 17, 27);
            line-height: 36px;
          }
          .timeto {
            font-size: 24px;
            color: rgba(147, 153, 159);
            line-height: 36px;
          }
          .title {
            padding-right: 24px;
            padding-bottom: 16px;
            font-size: 24px;
            color: rgb(7, 17, 27);
            line-height: 36px;
          }
          .star {
            line-height: 36px;
            padding-right: 24px;
          }
          .nub {
            line-height: 36px;
          }
        }
        .timebox {
          padding-bottom: 0;
        }
      }
    }
  }
  .width {
    width: 100%;
    height: 30px;
    border-top: 1px solid rgba(7, 17, 27, 0.1);
    border-bottom: 1px solid rgba(7, 17, 27, 0.1);
    background: #f3f5f7;
  }
  .mid {
    .crumbs {
      padding-bottom: 36px;
      padding-top: 36px;
      ul {
        display: flex;
        li {
          padding-left: 20px;
        }
      }
    }
    .line {
      width: 100%;
      div {
        border-bottom: 1px solid #ccc;
        margin-left: 40px;
        margin-right: 40px;
      }
    }
    .title {
      height: 60px;
      padding: 12px 18px;
      line-height: 24px;
      border-bottom: 1px solid rgba(7, 17, 27, 0.1);
      // color: #93999f;
      font-size: 0;
      &.on {
        .icon-dagou {
          color: green;
        }
      }

      .icon {
        display: inline-block;
        vertical-align: top;
        margin-right: 4px;
        font-size: 24px;
        height: 60px;
        line-height: 24px;
        // color: red;
      }
      .title-font {
        display: inline-block;
        vertical-align: top;
        font-size: 12px;
        line-height: 24px;
        padding-top: 20px;
        color: #93999f;
      }
    }
    .user {
      ul {
        &.active {
          display: none;
        }
      }
      .userbox {
        display: flex;
        flex-direction: column;

        .userbox-top {
          display: flex;
          justify-content: space-between;
          padding-right: 36px;
          .top-left {
            padding-top: 36px;
            padding-left: 36px;
            padding-right: 36px;
            display: flex;
            .images {
              img {
                width: 56px;
                height: 56px;
                border-radius: 50%;
              }
            }
            .usernamebox {
              padding-left: 24px;

              .username {
                font-size: 20px;
                color: rgb(7, 17, 27);
                line-height: 24px;
                display: block;
                padding-bottom: 8px;
              }
              .user-icon {
                // padding-left: 12px;
              }
              span:last-child {
                padding-left: 12px;
                font-size: 20px;
                font-weight: 200;
                color: rgba(147, 153, 159);
                line-height: 24px;
              }
            }
          }
          .top-right {
            // display: flex;
            padding-top: 40px;
            padding-left: 36px;
            span {
              font-size: 20px;
              font-weight: 200px;
              color: rgba(147, 153, 159);
              line-height: 24px;
              // padding-right: 36px;
              &:first-child {
                padding-right: 10px;
              }
            }
          }
        }
        .userbox-mid {
          // display: flex;
          padding-top: 12px;
          padding-bottom: 16px;
          margin-left: 110px;
          margin-right: 80px;
          // padding-left: 11  0px;

          word-break: break-all;
          span {
            font-size: 24px;
            color: rgb(7, 17, 27);
            line-height: 36px;
            // word-wrap:break-word;
          }
        }
        .userbox-bottom {
          margin-left: 110px;
          margin-right: 80px;
          div {
            display: inline-block;
            margin-right: 10px;
            border: 1px solid #ccc;
          }
        }
      }
      // display: flex;
    }
  }
}
</style>